﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Basic CellType</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), {sheetCount: 2});
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets,
                sheet = spread.getSheet(0);

            var $eventTrigger = $("#eventTrigger");
            spread.bind(spreadNS.Events.ButtonClicked, function() {
                var text = $eventTrigger.text() + "You click a button, check box, or hyperlink in a cell.\n";
                $eventTrigger.text(text);
            });
            sheet.isPaintSuspended(true);

            sheet.setName('Basic Usage');
            sheet.setColumnWidth(2, 140);
            sheet.setColumnWidth(1, 120);
            sheet.setRowHeight(1, 50)
            var b0 = new spreadNS.ButtonCellType();
            b0.text("Margin");
            b0.marginLeft(15);
            b0.marginTop(7);
            b0.marginRight(15);
            b0.marginBottom(7);
            sheet.setCellType(1, 2, b0, spreadNS.SheetArea.viewport);
            sheet.setValue(1, 1, "ButtonCellType");

            var c = new spreadNS.CheckBoxCellType();
            c.isThreeState(false);
            c.textTrue("Checked!");
            c.textFalse("Check Me!");
            sheet.setCellType(2, 2, c, spreadNS.SheetArea.viewport);
            sheet.setValue(2, 1, "CheckBoxCellType");

            var combo = new spreadNS.ComboBoxCellType();
            combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
            combo.editorValueType(spreadNS.EditorValueType.Text);
            sheet.getCell(3, 2, spreadNS.SheetArea.viewport).cellType(combo).value("Grape");
            sheet.setValue(3, 1, "ComboBoxCellType");

            var h = new spreadNS.HyperLinkCellType();
            h.text("SpreadJS Overview");
            sheet.setCellType(4, 2, h, spreadNS.SheetArea.viewport);
            sheet.getCell(4, 2, spreadNS.SheetArea.viewport).value("http://spread.grapecity.com/Products/SpreadJS/").hAlign(spreadNS.HorizontalAlign.center);
            sheet.setValue(4, 1, "HyperLinkCellType");
            sheet.isPaintSuspended(false);

            var sheet1 = spread.getSheet(1);
            sheet1.setName('DataBind');
            sheet1.isPaintSuspended(true);
            var _lines = ["Computers", "Washers", "Stoves"];
            var _colors = ["Red", "Green", "Blue", "White"];
            var _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];

            var lineCellType = new spreadNS.ComboBoxCellType();
            lineCellType.items(_lines);
            var colorCellType = new spreadNS.ComboBoxCellType();
            colorCellType.items(_colors);
            var checkBoxCellType = new spreadNS.CheckBoxCellType();
            var ratingCellType = new spreadNS.ComboBoxCellType();
            ratingCellType.items(_ratings);

            var datasource = [
                { name: "Stoves S0", line: "Washers", color: "Green", discontinued: true, rating: "Average"},
                { name: "Computers C1", line: "Washers", color: "Green", discontinued: true, rating: "Average"},
                { name: "Washers W3", line: "Washers", color: "Green", discontinued: true, rating: "Average"}
            ];
            var colInfos = [
                {name: "name", size: 100},
                {name: "line", cellType: lineCellType, size: 80},
                {name: "color", cellType: colorCellType},
                {name: "discontinued", cellType: checkBoxCellType, size: 80},
                {name: "rating", cellType: ratingCellType}
            ];
            sheet1.autoGenerateColumns = false;
            sheet1.setDataSource(datasource);
            sheet1.bindColumns(colInfos);
            sheet1.isPaintSuspended(false);

            $("#allowEditorReservedLocations").click(function () {
                sheet.allowEditorReservedLocations($("#allowEditorReservedLocations").prop("checked"));
            });
        };
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:340px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <input type="checkbox" id="allowEditorReservedLocations" checked="checked" />
            <label for="allowEditorReservedLocations">allEditorReservedLocations</label>
        </div>
        <div class="option-row">
            <textarea id="eventTrigger" style="width: 100%; height: 120px"></textarea>
        </div>
    </div>
</div>
</body>
</html>
